<template>
  <Modal
    :value="isShow"
    :title="book.name"
    :closable="true"
    draggable
    footer-hide
    @on-visible-change="onVisiableChange"
  >
    <div style="padding: 10px;">
      <!-- <Card :title="`作者： ${book.author}`" :padding="0" shadow> -->
      <CellGroup>
        <Cell title="作者：" :extra="book.author" />
        <Cell title="书籍大小(kb)：" :extra="book.size ? `${book.size / 1000}` : '暂无'" />
        <Cell title="书籍封面：" extra="暂无" />
      </CellGroup>
      <CellGroup @on-click="() => { book.uri ? handleDownload() : '' }">
        <Cell title="下载地址：" :extra="book.uri ? '点击下载' : '暂无'" />
      </CellGroup>
      <CellGroup>
        <Cell title="上传者：" :extra="book.creator || 'system'" />
        <Cell title="上传时间：" :extra="book.createTime" />
        <Cell
          title="第三方下载地址"
          :extra="book.thirdPartyUri && book.thirdPartyUri.length ? '如下' : '暂无'"
        />
      </CellGroup>
      <CellGroup
        v-for="t in book.thirdPartyUri"
        :key="t._id"
        @on-click="() => { t.uri ? handleThirdPartyDownload(t.uri) : '' }"
        v-show="book.thirdPartyUri && book.thirdPartyUri.length"
      >
        <Cell :title="t.uriName || '上传者未填写名称'" :label="t.provider ? `提供者: ${t.provider}` : t.uri">
          <!-- <Poptip trigger="hover" word-wrap :content="t.comment" style="width: 100%"> -->
          <!-- <Button slot="extra">点击跳转</Button> -->
          <!-- </Poptip> -->
          <Button slot="extra">
            <Tooltip max-width="360" :content="t.comment || '点击前往下载'" placement="left">
              点击跳转
            </Tooltip>
          </Button>
        </Cell>
      </CellGroup>
      <Divider />
      <CellGroup>
        <Cell title="添加第三方下载地址">
          <Button slot="extra" @click="handleAddThirdPartyUri">确认添加</Button>
        </Cell>
        <Cell title="地址名称">
          <Input slot="extra" placeholder="必填" v-model="newThirdPartyUri.uriName" />
        </Cell>
        <Cell title="下载链接">
          <Input slot="extra" placeholder="必填" v-model="newThirdPartyUri.uri" />
        </Cell>
        <Cell title="备注">
          <Input slot="extra" placeholder="选填" v-model="newThirdPartyUri.comment" />
        </Cell>
      </CellGroup>
      <!-- </Card> -->
    </div>
    <!-- <div slot="footer">
      <Button @click="() => { setVisiable(false) }" style="margin-left: 8px">关闭</Button>
    </div>-->
  </Modal>
</template>
<script>
import { bookDetails, addThirdPartyUri } from '../api/book'

export default {
  name: 'BookDetails',
  props: {
    isShow: {
      type: Boolean,
      required: true,
      default: false
    },
    bookId: {
      type: String,
      required: true
    },
    setVisiable: {
      type: Function,
      required: true
    }
  },
  data () {
    return {
      book: {},
      newThirdPartyUri: {
        uriName: '',
        uri: '',
        comment: ''
      }
    }
  },
  watch: {
    bookId: function () {
      if (this.bookId) {
        bookDetails(this.bookId).then(res => {
          this.book = res.data
        })
      }
    }
  },
  methods: {
    async fetchBookDetails () {
      if (this.bookId) {
        this.book = await bookDetails(this.bookId)
      } else {
        this.$Notice.error({
          title: '未获取到书籍ID',
          duration: 5
        })
      }
    },
    onVisiableChange (v) {
      this.setVisiable(v)
    },
    handleDownload () {
      window.open(
        `/api/book/download?id=${this.book._id}&token=${this.$store.state.accessToken}`,
        '_blank'
      )
    },
    handleThirdPartyDownload (uri) {
      window.open(uri, '_blank')
    },
    handleAddThirdPartyUri () {
      if (this.newThirdPartyUri.uriName && this.newThirdPartyUri.uri) {
        this.newThirdPartyUri.bookId = this.book._id
        addThirdPartyUri(this.newThirdPartyUri)
          .then(res => {
            this.$Notice.success({
              title: '添加成功!',
              duration: 5
            })
          })
          .finally(() => {
            this.book.thirdPartyUri.push(this.newThirdPartyUri)
            this.newThirdPartyUri = {}
          })
      } else {
        this.$Notice.error({
          title: '添加失败',
          desc: '信息填写不完整，请认真填写',
          duration: 5
        })
      }
    }
  }
}
</script>
